<script setup>
import HomePanel from './Components/HomePanel.vue'
import { getAllFlower, getAllCategory } from '@/api/flower.js'
import { onMounted, ref, computed } from 'vue'

const flowerList = ref([])
const categoryList = ref([])
const selectedCategory = ref(null)

const getHotList = async () => {
  const res = await getAllFlower()
  flowerList.value = res.data
}

const getCategoryList = async () => {
  const res = await getAllCategory()
  categoryList.value = res.data
}

const filteredList = computed(() => {
  if (!selectedCategory.value) return flowerList.value
  return flowerList.value.filter(f => f.category === selectedCategory.value)
})

const selectCategory = (name) => {
  selectedCategory.value = name === selectedCategory.value ? null : name
}

onMounted(() => {
  getHotList()
  getCategoryList()
})
</script>

<template>
<div class="category-nav">
  <div class="category-list">
    <div
        :class="['category-item', { active: selectedCategory === null }]"
        @click="selectCategory(null)"
    >
      全部
    </div>
    <div
        v-for="category in categoryList"
        :key="category.categoryId"
        :class="['category-item', { active: selectedCategory === category.categoryName }]"
        @click="selectCategory(category.categoryName)"
    >
      {{ category.categoryName }}
    </div>
  </div>
</div>

<HomePanel class="home-container">
  <ul class="goods-list">
    <li v-for="item in filteredList" :key="item.flowerId">
      <RouterLink :to="`/detail/${item.flowerId}`">
        <img :src="item.imageUrl" alt="flower" />
        <p class="name">{{ item.name }}</p>
        <p class="desc">{{ item.description }}</p>
      </RouterLink>
    </li>
  </ul>
</HomePanel>
</template>

<style scoped>
body {
  background-color: #f4f6f9;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

/* 分类导航区域 */
.category-nav {
  display: flex;
  justify-content: center;
  padding: 20px 10px;
  margin-bottom: 20px;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1000px;
  justify-content: center;
}

.category-item {
  padding: 8px 18px;
  background-color: #f2f2f2;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.category-item:hover {
  background-color: #e0f2ff;
  color: #1976d2;
  transform: translateY(-2px);
}

.category-item.active {
  background-color: #1976d2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

/* 商品展示区域 */
.home-container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.goods-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 0;
  list-style: none;
}

li {
  width: 250px;
  height: 420px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

li:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

li img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

li .name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 12px 0 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

li .desc {
  font-size: 14px;
  color: #888;
  text-align: center;
  padding: 0 10px;
  line-height: 1.4;
  max-height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  text-decoration: none;
  color: inherit;
}
</style>
